<template>
  <div>
    <ul>
      <li @click="setCmp('child1')">child1</li>
      <li @click="setCmp('child2')">child2</li>
    </ul>
    <hr />
    <!-- 
      动态组件
        is属性，指定要展示的组件的key名称
      动态组件一般和组存组件配合 keepalive
        exclude 写在此配置中的组件名称就不缓存  排除  :exclude="['child2']" child2它就是组件配置中的name名称
        include 写在此配置中的组件名称就缓存 包含     :include="['child2']" child2它就是组件配置中的name名称
          + 两者只能写一个，不要两个都写
        max 最多缓存的数据，默认不限制，一般不去设置 数字
     -->
    <KeepAlive :exclude="['child2']">
      <component :is="cmp" />
    </KeepAlive>
  </div>
</template>

<script>
import child1 from './components/dynamic/child1.vue'
import child2 from './components/dynamic/child2.vue'
export default {
  components: {
    child1,
    child2
  },
  data() {
    return {
      cmp: 'child1'
    }
  },
  methods: {
    setCmp(name) {
      this.cmp = name
    }
  }
}
</script>

<style lang="scss" scoped></style>
